<template>
  <div class="other-info">
    <div class="other_play">
      <span class="iconfont icon-bofangsanjiaoxing"></span>
      <span>播放</span>
    </div>
    <div class="other_collection">
      <span class="iconfont icon-shoucang"></span>
      <span>收藏</span>
    </div>
    <div class="other_comment">
      <span class="iconfont icon-pinglun"></span>
      <span>评论({{commentTotal}})</span>
    </div>
    <div class="other_more">
      <span class="iconfont icon-gengduo"></span>
      <span>更多</span>
    </div>
  </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "OtherInfo",
        data(){
          return{
            commentTotal:0
          }
        },
        computed:{
          ...mapState(['comment'])
        },
        watch:{
          comment(value){
            this.commentTotal=value.comment.commenttotal;
          }
        }
    }
</script>

<style scoped lang="less">
  .other-info>div{font-size: 13px; display: inline-block;width:122px;height:38px;line-height: 38px;text-align: center;border: 1px solid #c9c9c9;}
  .other-info .other_comment{width: 136px}
  .other-info>div:hover{background-color: #ededed;cursor: pointer}
  .other-info .other_play{background-color: #31c27c;color: white}
  .other-info .other_play:hover{background:#2caf6f}
</style>
